<template>
    <div>
        <div class="header_box">
            <ul>
                <li>登录</li>
                <li>退出登录</li>
                <li>我的订单</li>
                <li>会员中心</li>
                <li>帮助中心</li>
                <li>关于我们</li>
                <li>手机版</li>
            </ul>
        </div>
        <div class="nav_box">
            <div class="nav_content">
                <div class="logo_box">
                    <img src="../assets/img/logo.png" />
                </div>
                <ul>
                    <li>首页</li>
                    <li>居家</li>
                    <li>美食</li>
                    <li>服饰</li>
                    <li>母婴</li>
                    <li>个护</li>
                    <li>严选</li>
                    <li>数码</li>
                    <li>运动</li>
                    <li>杂项</li>
                </ul>
                <div class="search_box">
                    <i class="el-icon-search"></i>
                    <el-input v-model="text" size="small" placeholder="搜一艘"></el-input>
                    <i class="el-icon-shopping-cart-1"></i>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'HeadView',
    data() {
        return {
            text: ''
        }
    }
}
</script>

<style lang="scss" scoped>
.header_box {
    width: 100%;
    height: 50px;
    background: #333333;

    ul {
        width: 1240px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: right;
        align-items: center;

        li {
            color: #CDCDC3;
            font-size: 14px;
            padding: 0 12px;
            border-right: 1px solid rgb(136, 130, 130);
        }

        li:last-child {
            border: none;
        }
    }
}

.nav_box {
    width: 100vw;
    height: 130px;
    background: white;

    .nav_content {
        width: 1240px;
        height: 100%;
        margin: 0 auto;
        display: flex;

        .logo_box {
            width: 200px;
            height: 130px;

            img {
                width: 100%;
                margin-top: 20px;
            }
        }

        ul {
            width: 820px;
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            li {
                font-size: 16px;
                padding: 0 20px;
            }
            li:hover{
                color:greenyellow;
            }
        }

        .search_box {
            display: flex;
            align-items: center;

            .el-input {
                border: none;
                margin: 0 10px;
            }

            .el-icon-shopping-cart-1 {
                font-size: 24px;
            }
        }
    }
}
</style>